<template>
	<view class="page">
		<view class="container">
			<uni-icons class="container-icons" type="camera-filled" size="100" color="#666" />
			<view class="container-tip">人脸正面照</view>
			<uni-file-picker  class="group-info_upload" :sourceType="['camera']" :imageStyles="imageStyles" limit="1" @select="select"
				@progress="progress" @success="success" @fail="fail">
			</uni-file-picker>
			<view class="image" v-if="flag != 0 " >
				<image :src="imgSrc" mode="aspectFill"></image>
			</view>
		</view>
		<view class="d-flex ">
		 	<!-- <text class="label">考勤类型：</text>
			<picker mode="selector" :range="TypeArr" :value="typeIndex" @change="bindTypeChange">
				<text class="uni-input">{{TypeArr[typeIndex] }}</text>
			</picker> -->
			
		<!-- 	<uni-section >
				<uni-data-picker v-model="userInfo.clockType" placeholder="请选择考勤类型" :localdata="dataTree" >
				</uni-data-picker>
			</uni-section>
			 -->
			
		</view>
		
		<view class="button">
			<button type="default" @click="enterSignUp">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 自定义上传图片样式
				
				imageStyles: {
					width: 375,
					height: 238,
				},
				flag: 0,
				imgSrc: "",
				userInfo: {
					flag: 0,
					type:0
				},
				typeIndex:0,
				// 工种类型
				workerTypes: [{
					TypeArr: '班组长',
					value: '1'
				}, {
					TypeArr: '普通工人',
					value: '0'
				}],
				TypeArr: ['进场考勤','出场考勤'],
				dataTree: [{
						text: "进场考勤",
						value: "1",
					},
					{
						text: "退场考勤",
						value: "2",
					}]
			}
		},
		created() {
			this.flag = 0
		},
		onLoad(option) {
			debugger
			this.userInfo = JSON.parse(option.userInfo)
			
			console.log(this.userInfo);
		},
		methods: {
			bindTypeChange(){
				
			},
			bindPickerChange(){
				
			},
			// 提交上传身份证图片校验
			enterSignUp() {
				console.log("提交上传身份证图片校验");
				
				if(this.flag == 1){
					uni.navigateTo({
						url: "/pages/signUp/signUpResult/signUpResult?userInfo=" + JSON.stringify(this.userInfo)
					})
				}else {
					uni.showModal({
						title: "请上传正面照",
						showCancel: false,
						confirmText: "确定"
					})
				}
			},
			
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
				uni.showLoading({
					title: "正在加载",
				});
				 const that = this
				uni.uploadFile({
					url: 'http://116.205.142.103:8808/labor/system/user/faceCompare',
					filePath: e.tempFilePaths[0],
					name: 'userImg',
					formData: {
						'ID': this.userInfo.id,
					},
				 	method: 'get',
				 	success: res => {
						
						uni.hideLoading();
						if(res.statusCode != 400){
							let jsonRes = JSON.parse(res.data).data
							that.imgSrc = e.tempFilePaths[0]
							that.userInfo.imgSrc =  e.tempFilePaths[0]
							that.flag = 1
							if(jsonRes.Score > 50){
								that.userInfo.flag = 1
							}else{
								that.userInfo.flag = 0
								//e.tempFilePaths = []
								// uni.showModal({
								// 	title: "识别失败",
								// 	showCancel: false,
								// 	confirmText: "确定"
								// })
							}
						}
						
				 	},fail: res => {
						uni.hideLoading();
						// uni.showModal({
						// 	title: "识别失败",
						// 	showCancel: false,
						// 	confirmText: "确定"
						// })
					}
				 })
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			
			// 上传成功
			success(e) {
				console.log('上传成功',e)
				
			},
			
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 50rpx;
	}
	.container {
		width: 632rpx;
		height: 400rpx;
		border: 1rpx dashed #666;
		margin-bottom: 50rpx;
		text-align: center;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;

		.container-icons {
			position: absolute;
			top: 80rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

		.container-tip {
			position: absolute;
			bottom: 20rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

		.image {}
	}

	.submit {
		width: 600rpx;
		margin-top: 50rpx;
	}

	.group-info_upload {
		padding: 10px;
		padding-top: 0;
		width: 100%;
		height: 100%;
		background-color: red;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		// background-color: red;
	}
	
	.button {
		width: 600rpx;
		margin: 60rpx auto 0;
		border-radius: 10rpx;
	}
	
	uni-button[type=default] {
		background-color: #13BC75 !important;
		color: white;
	}
</style>
